<!--注册账号
验证前的弹窗-->
<template>
  <el-container>
    <el-main style="padding-top: 100px;height: 680px;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" v-if="this.show">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input v-model="ruleForm.checkPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="ruleForm.mail"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="电话or邮箱" prop="choose">
              <el-switch v-model="ruleForm.choose"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="验证码" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-button @click="visible = true" round :disabled="this.flag">获得验证码</el-button>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
          <el-button @click="re">返回</el-button>
        </el-form-item>
      </el-form>


      <el-dialog :visible.sync="visible" width="72%">
        <slide-verify :l="42"
                      :r="10"
                      :w="310"
                      :h="155"
                      @success="onSuccess"
                      @fail="onFail"
                      :slider-text="text"
        ></slide-verify>
      </el-dialog>

      <el-upload
          drag
          action="http://localhost:9000/user/setAvatar"
          :data="{username:this.ruleForm.username}"
          multiple v-if="!this.show"
          style="text-align: center;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-row style="padding-top: 30px">
        <el-col :offset="18">
          <el-button type="primary" @click="re" v-if="!this.show">确认</el-button>
        </el-col>
      </el-row>


    </el-main>
    <el-footer>
      <el-steps :active="this.active" simple>
        <el-step title="基本信息" icon="el-icon-edit"></el-step>
        <el-step title="头像（可选）" icon="el-icon-upload"></el-step>
      </el-steps>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "Registered",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 5 || value.length > 19) {
        callback(new Error('请输入6-18位的密码'));
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value != this.reCode) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
        checkPassword: '',
        phone: '',
        mail: '',
        gender: '',
        choose: false,
        code: ''
      },
      reCode: '',
      show: true,
      active: 0,
      flag: false,
      visible: false,
      msg: '',
      text: '向右滑',
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, required: true, trigger: 'blur'}
        ],
        checkPassword: [
          {validator: validatePass2, required: true, trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, required: true, trigger: 'blur'}
        ],
        mail: [
          {type: 'email', required: true, message: '请输入正确的邮箱号', trigger: ['blur', 'change']}
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        code: [
          {validator: checkCode, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (s) => {
        if (s) {
          const {data: res} = await this.$http.post("http://localhost:9000/user/registered", this.ruleForm);
          if (res === "ok") {
            this.show = false;
            this.active++;
          } else {
            console.log('error submit!!');
            return false;
          }
        }
      });
    },
    onSuccess() {
      this.getCode();
      this.visible = false;
    },
    onFail() {
      this.$message.error('验证失败');
    },
    getCode() {
      //电话验证
      if (this.ruleForm.choose === false && this.ruleForm.phone !== "") {
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 60000)
        this.$http.post("http://localhost:9000/user/getCodeBySms", {
          phone: this.ruleForm.phone
        }).then((res) => {
          this.reCode = res.data;
        })
      }
      //邮箱
      if (this.ruleForm.choose === true && this.ruleForm.mail !== "") {
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 60000)
        this.$http.post("http://localhost:9000/user/getCodeByMail", {
          mail: this.ruleForm.mail
        }).then((res) => {
          this.reCode = res.data;
        })
      }
    },
    re() {
      this.$router.push("/login");
    }
  }
}
</script>

<style scoped>

</style>
